<template>
    <div class="searchitem">
       <div class="searchitem_head">
            <div class="searchitem_head_content">
                <div class="left">
                    <span><img src="../assets/img/BL.png" alt=""></span>
                    <input type="text" @keyup.enter="search" v-model="content">
                </div>
                <p @click="back">取消</p>
            </div>
       </div>
       <div v-show="flag1">
          <div class="history" v-show="historysearch!=null">
           <div class="left">历史搜索</div>
           <span @click="del"><img src="../assets/img/del.png" alt=""></span>
       </div>
       <div class="history_content" >
           <div class="historyitem" v-for="(item,index) in historysearch" :key="index">
                 <p @click="updata(item)">{{item}}</p>
           </div>
       </div>
       </div>
       <div class="hotsearch" v-show="flag1">
            <span>热门搜索</span>
            <div class="historyitem">
               <div class="box" v-for="item in hotsearch" :key="item.id">
                  <p @click="hotupdata(item.name)">{{item.name}}</p>
               </div>
           </div>
        </div>
        <div class="searchlist_content">
             <h1>搜索列表</h1>
         <van-empty  v-if="searchlist==null" description="暂无相关视频"/> 
       
            <div class="box"  v-for="item in searchlist" :key="item.id">
               
            <!-- "'/songList?id='+item.creativeId" -->
            <router-link tag="div" :to="'/homeitem?reid='+item.id" class="left">
                <div class="time">{{item.duration|playerTime}}</div>
                <div class="cimg"  ></div>
               <span><img :src="item.cover" alt=""></span>
            </router-link>
            <div class="right">
               <p>{{item.title}}</p>
               <h4>播放量{{item.count.count_view|num}}喜欢{{item.count.count_like|num}}</h4>
               <div class="name">
                 <span :style="{ 'background-image': 'url(' + item.author.userinfo.avatar + ')' }"></span>{{item.author.userinfo.username}}
               </div>
            </div>
        </div>
       </div>
        <van-loading size="40px" vertical color="#767272" v-if="flag">正在玩命搜索中...</van-loading>
        
        
    </div>
</template>

<script>
 import { getSearchitem,getSearchKword } from "../api/searchitem";
    export default {
        data() {
            return {
                hotsearch: null,
                historysearch:[],
                content:'',
                searchlist:null,
                flag:false,
                flag1:true,
            };
        },
        methods: {
            getSearchitemFun(){
                getSearchitem().then(data=>{
                    this.hotsearch=data.data.list;
                })
            },
            // https://apis.netstart.cn/xpc/search?kw=青春
            getSearchKwordFun(obj){
               getSearchKword(obj).then(data=>{
                    console.log(data.data.list);
                    this.searchlist=data.data.list
                    if (data!=null) {
                        this.flag=false
                    }
               })
            },
            search(event){
               this.flag=true
               console.log(this.flag);
               let temp=JSON.parse(window.localStorage.getItem('history'))
               if (temp==null) {
                  let tempArr=[]
                  tempArr.push(event.target.value)
                  window.localStorage.setItem('history',JSON.stringify(tempArr))
               }
               else{
                   let flag=temp.some(item =>item==event.target.value);
                if (!flag) {
                 temp.push(event.target.value)
                 window.localStorage.setItem("history",JSON.stringify(temp))
                }
                         
               }
             this.getSearchKwordFun({kw:event.target.value})
             this.getHistoryFun()
             this.content='';
            },
            updata(value){
             this.content=value
            },
            del(){
                window.localStorage.removeItem('history')
                this.getHistoryFun()
            },
            getHistoryFun(){
              this.historysearch=JSON.parse(window.localStorage.getItem('history'))
             
             
            },
            hotupdata(value){
                this.content=value
            },
            back(){
                this.$router.push('/search')
            }
        },
        created() {
            this.getSearchitemFun()
            this.getHistoryFun()
        },
         filters:{
     num(value){
         if (value<10000) {
           return value
         }
         let w =value/10000
         return  Number(w).toFixed(1) +'w'
     },
     playerTime(data) {
          let m = parseInt(data / 60); //分钟
          let s = parseInt(data % 60); //秒
        
        return (m >10? m: "0" + m) +"'"+ (s <10 ? "0" + s : s)+"''"; 
         
         },  
         },
         watch:{
            "flag":function () {
              this.flag1=!this.flag1
            }
         }
        
    }
</script>

<style lang="less" scoped>
  .searchitem{
    background-color: #fff;
    min-height: 100vh;
    .van-loading{
        position: fixed;
       top: 130px;
        left: 35%;
        z-index: 999;
    }
    .searchitem_head{
        padding: 10px 0px;
         position: fixed;
         z-index: 55;
         top: 0px;
         width: 100%;
         margin: 0 auto;
         border: 1px solid #f2f2f2;
        background-color: #fff;
        .searchitem_head_content{
            display: flex;
            width: 90%;
            margin: 0 auto;
            justify-content: space-between;
            .left{
                flex: 1;
                display: flex;
                span{
                    display: block;
                    padding: 5px 4px 5px 10px;
                    border-top-left-radius: 5px;
                    border-bottom-left-radius: 5px;
                    background-color: rgb(247, 247, 247);
                    img{
                        display: block;
                        width: 15px;
                        margin-top: 2px;
                    }
                }
                input{
                    width: 80%;
                    padding: 10px 0px;
                    display: block;
                    outline: hidden;
                    border: none;
                    height: 10px;
                    background-color: rgb(247, 247, 247);
                    font-size: 12px;
                    color: gray;
                    border-top-right-radius: 5px;
                      border-bottom-right-radius: 5px;
                }
            }
            p{
                line-height: 30px;
                font-size: 12px;
            }
        }
    }
    .history{
        margin: 0 auto;
        width: 90%;
        margin-top: 50px;
        display: flex;
        padding: 10px 0px;
        justify-content: space-between;
        .left{
            font-size: 13px;
            font-weight: 600;
            color: gray;
        }
        span{
            display: block;
            img{
                width: 15px;
            }
        }
    }
    .history_content{
        width: 90%;
        margin: 0 auto;
         display: flex;
        flex-wrap: wrap;
       .historyitem{
       
         p{
            display: inline-block;
            padding:5px 10px;
            background-color:rgb(247, 247, 247);
            font-size: 12px;
            border-radius: 5px;
            margin-right: 5px;
            margin-bottom: 8px;
           
        }
       }
    }
    .hot{
        width: 90%;
        margin: 0 auto;
        p{
            padding: 20px 0px;
             font-size: 13px;
            font-weight: 600;
            color: gray;
        }
        .hotitem{
            font-size: 13px;
            padding: 10px 0px;
            span{
                display: inline-block;
               margin-right: 10px;
                font-size: 14px;
            }
        }
    }
    .hotsearch{
        width: 90%;
        margin: 0 auto;
        margin-top: 40px;
        span{
            display: block;
             padding: 20px 0px;
             font-size: 13px;
            font-weight: 600;
            color: gray;
        }
         .historyitem{
        display: flex;
        flex-wrap: wrap;
         p{
            display: inline-block;
            padding:5px 10px;
            background-color:rgb(247, 247, 247);
            font-size: 12px;
            border-radius: 5px;
            margin-right: 5px;
            margin-bottom: 8px;
           
        }
       }
    }
    .searchlist_content{
     width: 90%;
    margin: 0 auto;
    margin-top: 55px;
    h1{
        font-size: 13px;
    font-weight: 600;
    color: gray;
    }
   
    .box{
        display: flex;
        justify-content: space-between;
        padding: 10px 0px;
        border-bottom: 1px solid #f2f2f2;
     
        align-items: center;
        .left{
            width: 48%;
            position: relative;
            .cimg{
                position: absolute;
                top: 15px;
                left: 15px;
                background-image: url(../assets/img/c.png);
                background-repeat: no-repeat;
                width: 20px;
                height: 20px;
                border-radius: 50%;
                background-color: #6d6464;
                background-size: 60%;
                background-position: 4px 5px;

            }
            .time{
                position: absolute;
                bottom: 8px;
                left: 115px;
                color: #fff;
                font-size: 12px;
            }
        span{
            width: 100%;
            display: block;
            border-radius: 5px;
            overflow: hidden;
            img{
              
              width: 100%;
                height: 100px;
                
            }
        }
        }
        .right{
            width: 48%;
            h4{
                padding: 5px 0px;
                font-size: 10px;
            }
            p{
                font-size: 13px;
                font-weight: 600;
            }
            .name{
                font-size: 12px;
                color: gray;
                line-height: 20px;
                display: flex;
                span{
                    display: inline-block;
                    margin-right: 8px;
                    width: 20px;
                    height: 20px;
                    border-radius: 50%;
                    // background-image: url(../assets/img/test.png);
                    background-repeat: no-repeat;
                    background-size: cover;
                }
            }
        }
    }
   }
  }
</style>